<template>
  <div class="check">
    <div class="header" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c1">优惠券明细</span>
      <el-button class="return" icon="el-icon-arrow-left" @click="returnPage">返回</el-button>
    </div>

    <div class="container1">
      <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border @filter-change="tableChange"
                style="width: 100%" :default-sort="{prop: 'couponCode', order: 'descending'}">
        <el-table-column prop="userId" label="用户ID" width="190" align="center"/>
        <el-table-column prop="account" label="用户账号" width="190" align="center"/>
        <el-table-column prop="nickname" label="用户昵称" width="190" align="center"/>
        <el-table-column prop="uss" label="已使用" width="190" align="center"/>
        <el-table-column prop="unused" label="未使用" width="190" align="center"/>
        <el-table-column prop="cou" label="已过期" width="200" align="center"/>
      </el-table>
    </div>

    <div class="container" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c2 el-icon-search">筛选查询</span>
    </div>

    <div class="container2">
      <div  class="couponName">
        优惠券名称：
        <el-input type="text" v-model="couponName" placeholder="用户ID/账号" style="width: 180px;" @change="getScreen()"></el-input>
      </div>
      <div class="state">
        使用状态：
        <el-input type="text" v-model="state" placeholder="用户昵称" style="width: 180px;" @change="getScreen()"></el-input>
      </div>
      <div class="grant">
        领取方式：
        <el-input type="text" v-model="grant" placeholder="用户昵称" style="width: 180px;" @change="getScreen()"></el-input>
      </div>
      <div class="cz">
        <el-button @click="cz()">重 置</el-button>
      </div>
    </div>

    <div class="foot" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c2 el-icon-menu">数据列表</span>
    </div>

 <div class="foot1">
      <el-table :data="tableData2.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border @filter-change="tableChange"
                style="width: 100%" :default-sort="{prop: 'couponCode', order: 'descending'}">
        <el-table-column prop="couponCode" label="优惠码" width="100" align="center" sortable/>
        <el-table-column prop="couponName" label="优惠券名称" width="130" align="center"/>
        <el-table-column prop="couponPrice" label="面额" width="100" align="center" sortable/>
        <el-table-column prop="grant" label="领取方式" width="150" align="center"/>
        <el-table-column prop="startDate" label="领取时间" width="150" align="center" sortable/>
        <el-table-column prop="online" label="当前状态" width="100" align="center"/>
        <el-table-column prop="useDate" label="使用时间" width="150" align="center" sortable/>
        <el-table-column prop="orderNo" label="订单编号" width="150" align="center" sortable/>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="d(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
            align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[3,5,7,9]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length" class="page2">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],//对象数据
      tableData2:[],//明细数据
      couponName:'',//优惠券名称
      state:'',//使用状态
      grant:'',//领取方式

      currentPage: 1, // 当前页码
      total: 1, // 总条数
      pageSize: 5, // 每页显示几条
    }
  },
  mounted(){
    this.details();
    this.getScreen();
  },
  methods:{
    async details(){
      const {data:res} = await this.$http.get("/coupon/getCouponUserId",{
        params:{
          "userId":this.$store.state.num
        }
      })
      this.tableData = res;
      console.log("当前行ID为："+this.$store.state.num);
      // console.log(this.tableData)
      console.log('请求成功');
    },
    tableChange(filters) {
      console.log(filters);
      console.log('筛选条件变化');
      //这里根据filters，请求新数据可以实现服务器端筛选。
    },
    //优惠券明细查看
    async getScreen(){
      const {data:res} = await this.$http.get("/coupon/getCouponId2",{
        params:{
          "userId":this.$store.state.num
        }
      })
      this.tableData2 = res;
      this.tableData2.map(function (val) {
        if (val.grant == 2) {
          val.grant = '自动发放'
        } else if (val.grant == 3) {
          val.grant = '活动领取'
        } else if (val.grant == 4) {
          val.grant = '人工发放'
        } else if (val.grant == 5) {
          val.grant = '无限制'
        }
        if (val.online == 2) {
          val.online = '未使用'
        } else if (val.online == 3) {
          val.online = '已使用'
        }
      });
      console.log("当前行ID为："+this.$store.state.num);
      console.log('请求成功');
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //返回
    returnPage(){
      if (window.history.length <= 1) {
        this.$router.push({ path: "/system/storageManagement" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    //重置按钮
    cz() {
      this.couponName = '',
          this.state = '',
          this.grant = '',
          this.getScreen();
    },

  }
}
</script>

<style scoped>
.check {
  background-color: #F6F7F9;
  height: 100%;
  margin: 0px -20px 0px -40px;
}
.header {
  margin: -20px 0px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.c1 {
  float: left;
  line-height: 40px;
  margin: 10px 0px 0px 20px;
}

.return {
  margin: 10px 0px 0px 900px;
}

.container {
  margin: 20px 80px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.container1 {
  margin: 20px 90px 0px 20px;
  height: 95px;
  border: 1px solid #E5E5E5;
}

.c2 {
  float: left;
  margin: 20px 0px 0px 30px;
}

.container2 {
  margin: 0px 80px 0px 20px;
  height: 70px;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
}

.cz {
  margin: -40px -780px 0px 225px;
}

.couponName{
  margin: 15px 700px 0px -100px;
}

.state{
  margin: -40px -140px 0px -250px;
}

.grant{
  margin: -40px -140px 0px 420px;
}

.foot {
  margin: 20px 80px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.foot1 {
  margin: 0px 80px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.c2 {
  float: left;
  margin: 20px 0px 0px 30px;
}

.page {
  border: 1px solid #E5E5E5;
  margin: -1px 0px 0px 0px;;
}

.page2 {
  margin: 0px 0px 0px 420px;
}
</style>